<template>
  <div class="chushi">
    <transition>
      <router-view />
    </transition>
    <div class="dibu">
      <router-link to="/chushi/liebiao">首页</router-link>
      <router-link to="/chushi/Hear">爆爆团</router-link>
      <router-link to="/chushi/dingdan">订单</router-link>
      <router-link to="/chushi/my">我的</router-link>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    
  }
}
</script>
<style scoped>
.dibu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  color: black;
  border-top: 1px solid black;
  padding: 20px;
}
.router-link-active{
  color: red;
}
/* 入场效果 */
.v-enter {
  /* 开始隐藏 */
  opacity: 0;
}

/* 入场动画执行状态 */
.v-enter-active {
  transition: all 1s;
}

/* 动画完成结束时效果 */
.v-enter-to {
  /* 动画完成显示 */
  opacity: 1;
}
</style>
